<style>
    .build-params .popover {
        max-width: 400px !important;
    }

    .projectName .popover {
        max-width: 400px !important;
    }

    .environmentVariables .popover {
        max-width: 400px !important;
    }

    .zoneType .popover {
        max-width: 500px !important;
    }

    .tomcatWebAppsPath .popover {
        max-width: 500px !important;
    }

    .httpStatus .popover {
        max-width: 500px !important;
    }
</style>
<div class="modal-header">
    <h3 class="modal-title">
        <b style="color: #286090">持续集成任务配置</b>
    </h3>
</div>
<div class="modal-body">

    <form class="bs-example form-horizontal">

        <div class="wrapper-md">
            <!-- toaster directive -->
            <toaster-container
                    toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>

            <uib-tabset>
                <uib-tab index="0" heading="任务配置">

                    <div style="font-size:1em;">&nbsp;</div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>构建任务
                            </label>
                            <div class="input-group" style="padding-left: 15px; padding-right: 15px">
                                <input type="text" class="form-control" placeholder="任务名称" ng-model="jobItem.jobName">
                                <div class="input-group-btn">
                                    <button class="btn btn-default"
                                            ng-click="checkJobName(jobItem.jobName)"><i
                                            class="glyphicon glyphicon-check pull-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>任务模版</label>
                            <div class="col-lg-8">
                                <ui-select ng-model="nowTemplate.selected" theme="bootstrap" ng-change="setTemplate()">
                                    <ui-select-match placeholder="搜索模版名称......">{{$select.selected.name}}
                                    </ui-select-match>
                                    <ui-select-choices refresh="queryTemplate($select.search)" refresh-dalay="0"
                                                       repeat="item in templateList | filter: $select.search">
                                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>模版版本</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" placeholder="模版版本" readonly required
                                       ng-model="jobItem.jobVersion">
                            </div>
                        </div>
                    </div>

                    <div class="form-group build-params">
                        <label class="col-lg-2 control-label">仓库地址</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control" placeholder="仓库地址" readonly
                                   ng-model="appItem.sshUrl">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label">分支</label>
                            <div class="col-lg-8">
                                <!--required-->
                                <select class="form-control" ng-model="jobItem.branch"
                                        ng-options="branch.name as branch.name for branch in jobItem.branchList">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>回滚类型</label>
                            <div class="col-lg-8">
                                <select class="form-control" ng-model="jobItem.rollbackType"
                                        ng-options="rollback.code as rollback.name for rollback in rollbackType">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>环境类型</label>
                            <div class="col-lg-8">
                                <!--required-->
                                <select class="form-control" ng-model="jobItem.envType"
                                        ng-options="jobEnv.code as jobEnv.name for jobEnv in jobEnvType">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>构建类型</label>
                            <div class="col-lg-8">
                                <!--required-->
                                <select class="form-control" ng-model="jobItem.ciType"
                                        ng-options="ci.code as ci.name for ci in ciType">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-lg-2 control-label">说明</label>
                        <div class="col-lg-10">
                            <textarea class="form-control" cols="3" placeholder="简短描述"
                                      ng-model="jobItem.content"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div style="text-align:center;">
                            <div style="text-align:center;">

                                <button ng-click="saveJob()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                    <span class="glyphicon glyphicon-ok"></span>保存
                                </button>
                            </div>

                        </div>
                    </div>
                </uib-tab>
                <uib-tab index="1" heading="部署配置">

                    <div style="font-size:1em;">&nbsp;</div>


                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label">部署任务
                            </label>
                            <div class="input-group" style="padding-left: 15px; padding-right: 15px">
                                <input type="text" class="form-control" placeholder="任务名称" ng-model="jobItem.deployJobName">
                                <div class="input-group-btn">
                                    <button class="btn btn-default"
                                            ng-click="checkJobName(jobItem.deployJobName)"><i
                                            class="glyphicon glyphicon-check pull-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label">部署模版</label>
                            <div class="col-lg-8">
                                <ui-select ng-model="nowDeployTemplate.selected" theme="bootstrap" ng-change="setDeployTemplate()">
                                    <ui-select-match placeholder="搜索模版名称......">{{$select.selected.name}}
                                    </ui-select-match>
                                    <ui-select-choices refresh="queryDeployTemplate($select.search)" refresh-dalay="0"
                                                       repeat="item in deployTemplateList | filter: $select.search">
                                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="col-lg-4 control-label">模版版本</label>
                            <div class="col-lg-8">
                                <input type="text" class="form-control" placeholder="模版版本" readonly required
                                       ng-model="jobItem.deployJobVersion">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div style="text-align:center;">
                            <div style="text-align:center;">

                                <button ng-click="saveJob()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                    <span class="glyphicon glyphicon-ok"></span>保存
                                </button>

                                <button ng-click="resetJob()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #449d44; color: white;">
                                    <span class="glyphicon glyphicon-repeat"></span>重置
                                </button>
                            </div>

                        </div>
                    </div>
                </uib-tab>
                <uib-tab index="2" heading="参数配置" ng-show="jobItem.id != 0">

                    <div style="font-size:1em;">&nbsp;</div>

                    <div style="margin-top: 5px;">
                        <table class="table table-hover table-bordered table-striped"
                               ng-show="jobItem.paramList != null && jobItem.paramList.length != 0">
                            <thead>
                            <tr>
                                <!--class="col-md-10"-->
                                <td>参数</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="param in jobItem.paramList">
                                <td>
                                     <span style="background-color: #286090; color: white;"
                                           uib-popover-html="{{param.content}}"
                                           popover-trigger="'mouseenter'"
                                           class="label">
                                                   <i ng-show="param.paramName =='branch'" class="fa fa-code-fork"></i>
                                                   <i ng-show="param.paramName =='sshUrl'" class="fa fa-git"></i>{{param.paramName}}</span>
                                    </br>
                                    <span class="label" style="background-color: #20a03f; color: white;">{{param.paramValue}}</span>

                                </td>
                                <td>
                                    <button ng-click="editParam(param)"
                                            class="btn btn-xs"
                                            style="margin-left: 20px; background-color: #2e6da4; color: white;">
                                        <span class="glyphicon glyphicon-edit"></span>编辑
                                    </button>

                                    <button ng-click="delParam(param.id)"
                                            class="btn btn-xs pull-right"
                                            uib-popover-html="'移除用户'" popover-trigger="'mouseenter'"
                                            style="background-color: red; color: white;">
                                        <span class="glyphicon glyphicon-log-out"></span>移除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="form-group" style="box-shadow: 0 0 5px #ddd;padding: 10px;">
                        <div class="form-group">
                            <div class="col-md-6">
                                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>参数
                                </label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" placeholder="param name"
                                           ng-model="nowParam.paramName">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>参数值
                                </label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" placeholder="param value"
                                           ng-model="nowParam.paramValue">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">备注</label>
                            <div class="col-lg-10">
                            <textarea class="form-control" cols="3" placeholder=""
                                      ng-model="nowParam.content"></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div style="text-align:center;">
                                <!--保存-->
                                <button ng-click="saveParam()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                    <span class="glyphicon glyphicon-ok"></span>保存
                                </button>
                                <!--重置-->
                                <button ng-click="resetParam()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #449d44; color: white;">
                                    <span class="glyphicon glyphicon-repeat"></span>重置
                                </button>
                            </div>
                        </div>
                    </div>

                </uib-tab>
                <uib-tab index="3" heading="用户配置">

                    <div style="font-size:1em;">&nbsp;</div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-lg-2 control-label"><span style="color: #ec2121;">*</span>用户名</label>
                            <div class="col-lg-8">
                                <ui-select ng-model="nowUser.selected" theme="bootstrap">
                                    <ui-select-match placeholder="搜索用户名称......">
                                        {{$select.selected.username}}<{{$select.selected.displayName}}>
                                    </ui-select-match>
                                    <ui-select-choices refresh="queryUsers($select.search)" refresh-dalay="0"
                                                       repeat="item in userList | filter: $select.search">
                                        <div ng-bind-html="item.username + '<' + item.displayName + '>' | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                            <div class="col-lg-2">
                                <button ng-click="addUser()"
                                        class="btn btn-xs"
                                        style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                    <span class="glyphicon glyphicon-plus"></span>添加
                                </button>

                                <!--<span class="glyphicon glyphicon-plus" ng-click="addItem()"></span>-->
                            </div>
                        </div>
                    </form>

                    <div style="margin-top: 5px;">
                        <table class="table table-hover table-bordered table-striped">
                            <thead>
                            <tr>
                                <td class="col-md-3">用户</td>
                                <td class="col-md-3">姓名</td>
                                <td class="col-md-7">
                                    <b style="color: #286090">Email</b>
                                </td>
                                <td class="col-md-2">操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="user in todoDetail.newProjectMap.users">
                                <td>{{user.username}}</td>
                                <td>{{user.displayName}}</td>
                                <td>{{user.mail}}</td>
                                <td>
                                    <button ng-click="delUser(user)"
                                            class="btn btn-xs pull-right"
                                            uib-popover-html="'移除用户'" popover-trigger="'mouseenter'"
                                            style="background-color: red; color: white;">
                                        <span class="glyphicon glyphicon-log-out"></span>移除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="4">
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="form-group">
                        <div style="text-align:center;" ng-show="todoDetail.todoStatus <= 0">
                            <!--保存-->
                            <button ng-click="saveTodo()"
                                    class="btn btn-xs"
                                    style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                <span class="glyphicon glyphicon-ok"></span>保存
                            </button>
                        </div>
                    </div>
                </uib-tab>
            </uib-tabset>
        </div>

    </form>

    <div ng-if="alert.type != ''">
        <div uib-alert ng-class="'alert-' + alert.type" close="closeAlert()">{{alert.msg}}</div>
    </div>
</div>